<template>
  <div class="ele-body">
    <el-card shadow="never" body-style="padding-bottom:0;">

      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="学生考勤分组" name="studentAttendGroup">
          <el-row :gutter="15" style="margin-top: 15px;">
            <el-col :md="6" style="margin-bottom:15px;">
              <!-- 操作按钮 -->
              <div class="ele-table-tool ele-table-tool-default">
                <el-button @click="showAttendGroupEdit=true" type="primary" icon="el-icon-plus" class="ele-btn-icon" size="small">添加考勤组</el-button>
                <el-button @click="edit" type="warning" icon="el-icon-edit" class="ele-btn-icon"
                           :disabled="!currentStudentAttendGroup" size="small">修改考勤组
                </el-button>
                <el-button @click="remove" type="danger" icon="el-icon-delete" class="ele-btn-icon"
                           :disabled="!currentStudentAttendGroup" size="small">删除考勤组
                </el-button>
              </div>
              <!-- 数据表格 -->
              <ele-data-table ref="studentAttendGroupTable" :config="studentAttendGroupTable" :current.sync="currentStudentAttendGroup" :choose="[]" @done="studentAttendGroupDone" highlight-current-row
                              :height="tbHeight" class="dict-table">
                <el-table-column type="index" label="编号" width="60" align="center"/>
                <el-table-column prop="group_name" label="考勤分组名称" show-overflow-tooltip/>
              </ele-data-table>
            </el-col>
            <el-col :md="18" style="margin-bottom:15px;">
              <member-data v-if="currentStudentAttendGroup" :dict-type-id="currentStudentAttendGroup.id" :tb-height="tbHeight"/>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="教职工考勤分组" name="facultyAttendGroup">
          <el-row :gutter="15" style="margin-top: 15px;">
            <el-col :md="6" style="margin-bottom:15px;">
              <!-- 操作按钮 -->
              <div class="ele-table-tool ele-table-tool-default">
                <el-button @click="showAttendGroupEdit=true" type="primary" icon="el-icon-plus" class="ele-btn-icon" size="small">添加考勤组
                </el-button>
                <el-button @click="edit" type="warning" icon="el-icon-edit" class="ele-btn-icon"
                           :disabled="!currentFacultyAttendGroup" size="small">修改考勤组
                </el-button>
                <el-button @click="remove" type="danger" icon="el-icon-delete" class="ele-btn-icon"
                           :disabled="!currentFacultyAttendGroup" size="small">删除考勤组
                </el-button>
              </div>
              <!-- 数据表格 -->
              <ele-data-table ref="facultyAttendGroupTable" :config="facultyAttendGroupTable" :current.sync="currentFacultyAttendGroup" :choose="[]" @done="facultyAttendGroupDone" highlight-current-row
                              :height="tbHeight" class="dict-table">
                <el-table-column type="index" label="编号" width="60" align="center"/>
                <el-table-column prop="group_name" label="考勤分组名称" show-overflow-tooltip/>
              </ele-data-table>
            </el-col>
            <el-col :md="18" style="margin-bottom:15px;">
              <member-data v-if="currentFacultyAttendGroup" :dict-type-id="currentFacultyAttendGroup.id" :tb-height="tbHeight"/>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>

    </el-card>

    <!-- 编辑弹窗 -->
    <el-dialog :title="editAttendGroupForm.id?'修改字典':'添加字典'" :visible.sync="showAttendGroupEdit" width="400px"
               @closed="editAttendGroupForm={}" :destroy-on-close="true" :lock-scroll="false">
      <el-form :model="editAttendGroupForm" ref="editForm" :rules="editAttendGroupRules" label-width="82px">
        <el-form-item label="分组名称:" prop="group_name">
          <el-input v-model="editAttendGroupForm.group_name" placeholder="请输入考勤分组名称" clearable/>
        </el-form-item>
        <el-form-item label="排序号:" prop="sort">
          <el-input-number v-model="editAttendGroupForm.sort" controls-position="right" :min="0"
                           placeholder="请输入排序号" class="ele-fluid ele-text-left"/>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="showAttendGroupEdit=false">取消</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import MemberData from './member-data'

export default {
  name: "AttendGroup",
  components: {MemberData},
  data() {
    return {
      studentAttendGroupTable: {url: '/attendGroup/list', page: true, where: {group_type: 1}},  // 学生考勤组表格配置
      facultyAttendGroupTable: {url: '/attendGroup/list', page: true, where: {group_type: 2}},  // 教职工考勤组表格配置
      currentStudentAttendGroup: null,  // 表格选中学生考勤分组数据
      currentFacultyAttendGroup: null, // 表格选中教职工考勤分组数据
      showAttendGroupEdit: false,  // 是否显示学生/教职工考勤分组表单弹窗
      editAttendGroupForm: {group_type: 1},  // 学生/教职工考勤分组表单数据
      editAttendGroupRules: {  // 学生考勤分组表单验证规则
        group_name: [
          {required: true, message: '请输入字典名称', trigger: 'blur'}
        ],
        sort: [
          {required: true, message: '请输入排序号', trigger: 'blur'}
        ]
      },
      activeName: 'studentAttendGroup'
    }
  },
  computed: {
    /* 表格固定高度 */
    tbHeight() {
      return this.$store.state.theme.screenWidth < 992 ? undefined : 'calc(100vh - 265px)';
    }
  },
  methods: {
    /* 表格渲染完成回调 */
    studentAttendGroupDone(res) {
      if (res.result.data.length > 0) this.$refs.studentAttendGroupTable.setCurrentRow(res.result.data[0]);
    },
    facultyAttendGroupDone(res) {
      if (res.result.data.length > 0) this.$refs.facultyAttendGroupTable.setCurrentRow(res.result.data[0]);
    },
    /* 显示编辑 */
    edit() {
      if(this.activeName === 'studentAttendGroup') {
        this.editAttendGroupForm = Object.assign({}, this.currentStudentAttendGroup);
      } else if(this.activeName === 'facultyAttendGroup') {
        this.editAttendGroupForm = Object.assign({}, this.currentFacultyAttendGroup);
      }
      this.showAttendGroupEdit = true;
    },
    /* 保存编辑 */
    save() {
      this.$refs['editForm'].validate((valid) => {
        if (valid) {
          const loading = this.$loading({lock: true});
          this.$http.post('/attendGroup/edit', this.editAttendGroupForm).then(res => {
            loading.close();
            this.showAttendGroupEdit = false;
            this.$message({type: 'success', message: res.data.msg});
            if(this.activeName === 'studentAttendGroup') {
              this.$refs.studentAttendGroupTable.reload();
            } else if(this.activeName === 'facultyAttendGroup') {
              this.$refs.facultyAttendGroupTable.reload();
            }
          }).catch(e => {
            loading.close();
            this.$message.error(e.message);
          });
        } else {
          return false;
        }
      });
    },
    /* 删除 */
    remove() {
      this.$confirm('确定要删除选中的字典吗?', '提示', {type: 'warning'}).then(() => {
        const loading = this.$loading({lock: true});
        let currentId;
        if(this.activeName === 'studentAttendGroup') {
          currentId = this.currentStudentAttendGroup.id
        } else if(this.activeName === 'facultyAttendGroup') {
          currentId = this.currentFacultyAttendGroup.id
        }
        this.$http.post('/attendGroup/delete?id=' + currentId).then(res => {
          loading.close();
          this.$message({type: 'success', message: res.msg});
          if(this.activeName === 'studentAttendGroup') {
            this.$refs.studentAttendGroupTable.reload();
          } else if(this.activeName === 'facultyAttendGroup') {
            this.$refs.facultyAttendGroupTable.reload();
          }
        }).catch(e => {
          loading.close();
          this.$message.error(e.message);
        });
      }).catch(() => 0);
    },
    handleClick(tab, event) { // 切换面板回调
      console.log(tab, event);
      if(tab.name === 'studentAttendGroup') {
        this.editAttendGroupForm = {group_type: 1}
      } else if(tab.name === 'facultyAttendGroup') {
        this.editAttendGroupForm = {group_type: 2}
      }
    }
  }
}
</script>

<style scoped>
.dict-table >>> .el-table__row {
  cursor: pointer;
}

.dict-table >>> .el-table__row > td:last-child:after {
  content: "\e6e0";
  font-family: element-icons !important;
  font-style: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1;
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -7px;
}

.dict-table >>> .el-table__row > td:last-child .cell {
  padding-right: 20px;
}
</style>